<template>
  <div class="layout">
    <div class="tip-text" v-if="update">数据每小时更新一次，上次更新时间{{ update.substr(11) }}</div>
    <el-form ref="formRef" :model="form" class="searchForm" :inline="true">
      <el-form-item :label="formItem[type].timeLabel" class="selectTime">
        <el-button plain :type="form.currentId == '1' ? 'primary' : ''" @click="selectTime('1')" id="1">昨天</el-button>
        <el-button plain :type="form.currentId == '2' ? 'primary' : ''" @click="selectTime('2')" id="2">最近7天</el-button>
        <el-button plain :type="form.currentId == '3' ? 'primary' : ''" @click="selectTime('3')" id="3">最近30天</el-button>
        <el-date-picker v-model="form.createTime" value-format="YYYY-MM-DD HH:mm:ss" type="datetimerange" start-placeholder="开始时间" end-placeholder="结束时间" class="date-picker-item" @change="changeDate" />
      </el-form-item>
      <el-form-item :label="formItem[type].derpartLabel">
        <el-autocomplete v-model="form.users" :fetch-suggestions="querySearchAsync" placeholder="请输入标题进行搜索" @select="handleSelect" @change="changeSelect" style="width: 100%" clearable>
          <template v-slot="{ item }">
            <div v-html="light(item.value, form.users)"></div>
          </template>
        </el-autocomplete>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="submitForm()">查询</el-button>
        <el-button @click="resetForm()">清空</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script setup lang="ts">
  import { ref, reactive, computed, watch, onMounted } from 'vue'
  import type { ElForm } from 'element-plus'
  import { titleSearch } from '@/api/channel/operation'
  import { getTime } from '@/api/board'
  import { getDay, DFormat } from '@/utils/utils'
  type FormInstance = InstanceType<typeof ElForm>
  const update = ref()
  const emit = defineEmits({
    submit: null
  })
  const formRef = ref<FormInstance>()
  const light = (val: string, keyword: string) => {
    const Reg = new RegExp(keyword, 'g')
    if (val) {
      return val.replace(Reg, `<span style="color: #ff6b00">${keyword}</span>`)
    }
  }
  onMounted(() => {
    getTime({
      census_module: 5
    }).then((res: any) => {
      update.value = res?.date_updated_at
    })
  })
  const changeSelect = (data: any) => {
    if (!data) {
      form.id = ''
    }
  }
  const querySearchAsync = (queryString: string, cb: (arg: any) => void) => {
    let results: any = []
    if (queryString == '') {
      cb(results)
    } else {
      const params = {
        title: queryString,
        type: 3
      }
      titleSearch(params).then((data: any) => {
        data.forEach((item: any) => {
          results.push({
            value: item.title,
            id: item.id
          })
        })
        cb(results)
      })
    }
  }
  const handleSelect = (item: any) => {
    form.id = item.id
  }
  // 类型
  const type = ref(1)
  // 标签
  const formItem = reactive([
    {},
    {
      derpartLabel: '群发搜索',
      timeLabel: '时间筛选'
    }
  ])
  // 收集的表单数据
  const form = reactive({
    id: '',
    users: '',
    currentId: '2',
    createTime: [getDay(-6), getDay(0, true)]
  })
  // 提交查询
  const submitForm = () => {
    emit('submit', form)
  }
  // 选择最近时间
  const selectTime = (val: any) => {
    let type = val
    if (!form.createTime) {
      form.createTime = ['', '']
    }
    switch (type) {
      case '1':
        form.createTime[0] = getDay(-1)
        form.createTime[1] = getDay(-1, true)
        break
      case '2':
        form.createTime[0] = getDay(-6)
        form.createTime[1] = getDay(0, true)
        break
      case '3':
        form.createTime[0] = getDay(-29)
        form.createTime[1] = getDay(0, true)
        break
    }
    form.currentId = val
    submitForm()
  }

  //重置
  const resetForm = () => {
    form.users = ''
    form.createTime[0] = getDay(-6)
    form.createTime[1] = getDay(0, true)
    form.currentId = '2'
    form.id = ''
    submitForm()
  }
  const changeDate = () => {
    form.currentId = ''
  }
</script>

<style lang="scss" scoped>
  .layout {
    width: 100%;
    position: relative;

    .tip-text {
      font-size: 14px;
      color: #848484;
      line-height: 14px;
      text-align: right;
      margin-bottom: 10px;
    }
    .searchForm {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 16px;
      background: #fff;
      position: relative;
      border: 1px solid #eaeaea;

      :deep(.el-form-item) {
        margin: 0;

        .el-form-item__content {
          display: flex;

          .date-picker-item {
            max-width: 360px;
            margin-left: 10px;
          }
        }
      }
    }
  }
</style>
